<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>specificity demo</title>
    <link rel="stylesheet" href="../styles.css" />
    <style></style>

    <style class="editable">
      /* 1. specificity: 1-0-1 */
      #outer a {
        background-color: red;
      }

      /* 2. specificity: 2-0-1 */
      #outer #inner a {
        background-color: blue;
      }

      /* 3. specificity: 1-0-4 */
      #outer div ul li a {
        color: yellow;
      }

      /* 4. specificity: 1-1-3 */
      #outer div ul .nav a {
        color: white;
      }

      /* 5. specificity: 0-2-4 */
      div div li:nth-child(2) a:hover {
        border: 10px solid black;
      }

      /* 6. specificity: 0-2-3 */
      div li:nth-child(2) a:hover {
        border: 10px dashed black;
      }

      /* 7. specificity: 0-3-3 */
      div div .nav:nth-child(2) a:hover {
        border: 10px double black;
      }

      a {
        display: inline-block;
        line-height: 40px;
        font-size: 20px;
        text-decoration: none;
        text-align: center;
        width: 200px;
        margin-bottom: 10px;
      }

      ul {
        padding: 0;
      }

      li {
        list-style-type: none;
      }
    </style>
  </head>

  <body>
    <section class="preview">
      <div id="outer" class="container">
        <div id="inner" class="container">
          <ul>
            <li class="nav"><a href="#">One</a></li>
            <li class="nav"><a href="#">Two</a></li>
          </ul>
        </div>
      </div>
    </section>

    <textarea class="playable playable-css" style="height: 280px">

/* 1. specificity: 1-0-1 */
#outer a {
  background-color: red;
}

/* 2. specificity: 2-0-1 */
#outer #inner a {
  background-color: blue;
}

/* 3. specificity: 1-0-4 */
#outer div ul li a {
  color: yellow;
}

/* 4. specificity: 1-1-3 */
#outer div ul .nav a {
  color: white;
}

/* 5. specificity: 0-2-4 */
div div li:nth-child(2) a:hover {
  border: 10px solid black;
}

/* 6. specificity: 0-2-3 */
div li:nth-child(2) a:hover {
  border: 10px dashed black;
}

/* 7. specificity: 0-3-3 */
div div .nav:nth-child(2) a:hover {
  border: 10px double black;
}

a {
  display: inline-block;
  line-height: 40px;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  margin-bottom: 10px;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}</textarea
    >

    <textarea class="playable playable-html" style="height: 140px">
<div id="outer" class="container">
  <div id="inner" class="container">
    <ul>
      <li class="nav"><a href="#">One</a></li>
      <li class="nav"><a href="#">Two</a></li>
    </ul>
  </div>
</div></textarea
    >

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="../playable.js"></script>
</html>
